<template>
  <div id="app">
    <div class="container">
      <div class="close">
        <span class="iconfont iconicon-test"></span>
      </div>
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="inputs">
        <!-- 使用组件时，为组件设置的属性默认会被添加到封装组件的根元素上 -->
        <myipt
          placeholder="请输入手机号"
          v-model="user.username"
          :rules="/^1[35789]\d{9}$|^1\d{4}$/"
          msg="手机号输入不合法"
        ></myipt>
        <!-- v-model:实现了两个操作
        1.将变量的数据赋值给元素::value='user.username'
        2.将元素的数据赋值给变量:@input='dealinput'-->
        <myipt placeholder="密码" v-model="user.password"></myipt>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class>去注册</a>
      </p>
      <mybtn @click="login">登陆</mybtn>
    </div>
  </div>
</template>

<script>
import mybtn from "@/components/mybutton.vue";
import myipt from "@/components/myinput.vue";
// import myaxios from '@/utils/myaxios.js'
// import 'vant/lib/index.css';
// import { Toast } from 'vant';
import { login } from "@/apis/users.js";
export default {
  data() {
    return {
      user: {
        username: "10086",
        password: "123",
      },
    };
  },
  components: {
    mybtn,
    myipt,
  },
  methods: {
    // 登录
    // 接口类型:【POST】
    // 接口地址:/login
    // 标记当前方法是异步方法
    async login() {
      // axios.post('/login',this.user)
      // await：可以让异步操作先执行完，再执行后续的代码，同时可以获取then回调函数中的返回值
      // 说白了就是让我们能够以同步的方式调用异步方法，所以我们可以接收到异步操作的返回值
      let res = await login(this.user)
      console.log(res)
      if(res.data.statusCode == 401){
        this.$toast.fail({
          message:res.data.message,
          duration:5000
        })
      }else{
        this.$toast.success('登陆成功')
        // 将token进行本地存储
        localStorage.setItem('hm_toutiao_52',res.data.data.token)
        // 再将用户信息存储到本地存储
        localStorage.setItem('toutiao_userinfo_52',JSON.stringify(res.data.data.user))
        // this.$router.push({path:'/personal/'+res.data.data.user.id})
        // 获取可能传递的回传url
        // decodeURIComponent:可以对url进行解码
        let backurl = decodeURIComponent(window.location.hash.split('=')[1])
        // console.log(decodeURIComponent(backurl))
        console.log(backurl,typeof backurl)
        if(backurl && backurl != 'undefined'){
          this.$router.push({path:backurl})
        }else{
          this.$router.push({path:'/personal/'+res.data.data.user.id})
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  .container {
    padding: 20px;
  }

  .close {
    span {
      font-size: 27 / 360 * 100vw;
    }
  }

  .logo {
    display: flex;
    justify-content: center;

    span {
      display: block;
      font-size: 126 / 360 * 100vw;
      color: #d81e06;
    }
  }

  .inputs {
    input {
      margin-bottom: 20px;
    }
  }

  .tips {
    text-align: right;
    margin-bottom: 20px;

    a {
      color: #3385ff;
    }
  }
}
</style>